<template>
    <div class="movies_detail">
        <div class="img">
            <img :src="movieData.images.large" alt="">
        </div>
        <div class="title">{{movieData.title}}</div>
        <div class="content">
            <p class="grade">评分: {{movieData.rating.average}}</p>
            <p class="direct">导演: {{movieData.directors[0].name}}</p>
            <p class="role">主演: 
                <span v-for="(item,index) in movieData.casts" :key="index">{{item.name}}</span>
            </p>
        </div> 
        <button type="primary" class="btn">我要观看</button>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data(){
        return {
            index:null,
            movieData:{}
        }
    },
    beforeMount(){
        //对于小程序而言要在此生命周期获取数据,等到页面挂载上去的时候,数据就可以用了,否则在mounted得到数据,页面挂载了数据才得到,导致数据不可用
        this.index = this.$mp.query.index;
        this.movieData = this.moviedetail_arr[this.index]
        // console.log(this.movieData);
    },
    mounted(){
        
        
    },
    computed:{
        ...mapState(['moviedetail_arr'])
    }
}
</script>
<style scoped>
    .movies_detail {
        padding: 50rpx 100rpx 0;
    }
    img {
        width: 600rpx;
        box-shadow: 0 0 700rpx #ccc;
    }
    .title {
        font-size: 50rpx;
        font-weight: 900;
        text-align: center;
        margin-top: 30rpx;
    }
    .content {
        font-size: 30rpx;
        line-height: 50rpx;
    }
    .btn {
        font-size: 30rpx;
        margin-top: 10rpx;
    }
</style>


